<!-- 首席服务员-服务清单 -->
<template>
  <div class="container">
      <div class="card">
          <!-- 标题和查看更多 -->
          <div class="card-header">
              <div class="card-title">
                  <img src="../../../assets/img/line.png" alt />
                  <span>事项清单</span>
              </div>
              <div class="card-more" @click="toPage('pages/chiefServer/server/itemMore', { deptId: deptId })">
                  <span style="margin-right: 3px; color: #0c92ff;">查看更多</span>
                  <u-icon color="#0c92ff" name="arrow-right"></u-icon>
              </div>
          </div>
          <div v-if="itemList.length" class="card-list">
            <template v-for="(item, index) in itemList">
              <div class="card-item" @click="toPage('pages/chiefServer/server/itemDetail', { id: item.id })" :key="index">
                <div class="card-content">{{item.title}}</div>
                <div class="card-time">{{item.publishTimeStr}}</div>
              </div>
            </template>
          </div>
          <div v-else class="list-empty">暂无内容</div>
      </div>
      <!-- <div class="card">
          <div class="card-header">
              <div class="card-title">
                  <img src="../../../assets/img/line.png" alt />
                  <span>政策文件</span>
              </div>
              <div class="card-more" @click="toPage('pages/chiefServer/server/policyMore', { id: id })">
                  <span style="margin-right: 3px; color: #0c92ff;">查看更多</span>
                  <u-icon color="#0c92ff" name="arrow-right"></u-icon>
              </div>
          </div>
          <div v-if="policyList.length" class="card-list">
            <template v-for="(item, index) in policyList">
              <div class="card-item" @click="openDocument(item.filePath)" :key="index">
                <div class="card-content">{{item.title}}</div>
                <div class="card-time">{{item.publishTimeStr}}</div>
              </div>
            </template>
          </div>
          <div v-else class="list-empty">暂无内容</div>
      </div> -->
  </div>
</template>
<script>
import Empty from "../../../components/Empty.vue";
import { getChiefServerListAPI } from "../../../api/chief"

export default {
  components: { Empty },
  data() {
      return {
        loading: false,
        itemList: [],
        id: '',
        deptId: '',
      };
  },
  onShareAppMessage() {},
  onLoad(options) {
    let { deptId } = options;
    this.deptId = deptId;
    this.loading = true
    wx.showLoading({title: "加载中..."})
    getChiefServerListAPI(deptId).then((res) => {
      this.itemList = res.data;
      wx.hideLoading();
      this.loading = false;
    })
  },
  methods: {
      toPage(url, params) {
          this.$u.route({ url, params });
      },
      openDocument(url) {
            wx.showLoading({
                title: "打开文件中...",
            });
            wx.downloadFile({
                url,
                success: function (res) {
                    const filePath = res.tempFilePath;
                    wx.openDocument({
                        filePath: filePath,
                        success: function (res) {
                            wx.hideLoading();
                        },
                    });
                },
            });
        },
  },
};
</script>
<style scoped lang="scss">
@import "../../../assets/scss/common.scss";

.container {
  min-height: 100vh;
  background-color: #fafafa;
  box-sizing: border-box;
  padding: 15px;
  .grids {
      display: flex;
      flex-direction: column;
      border-radius: 8px;
      background-color: #fff;
      margin-bottom: 15px;
      box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.1) !important;
      .grids-title {
          padding: 15px 15px 8px;
          border-bottom: 1px solid #efefef;
          font-size: 18px;
          font-weight: bold;
      }
      .grids-content {
          display: flex;
          flex-wrap: wrap;
          padding: 15px;
          .grid {
              width: 25%;
              display: flex;
              flex-direction: column;
              align-items: center;
              .icon {
                  width: 50px;
                  height: 50px;
                  margin-bottom: 5px;
              }
              .text {
                  text-align: center;
                  font-size: 13px;
              }
          }
      }
  }
  .card {
      padding: 15px 0;
      border-radius: 8px;
      background-color: #fff;
      margin-bottom: 15px;
      box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.1) !important;
      .card-header {
          padding: 0 15px 8px;
          border-bottom: 1px solid #efefef;
          margin-bottom: 12px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          .card-title {
              font-size: 18px;
              font-weight: bold;
              display: flex;
              align-items: center;
              img {
                  width: 5px;
                  height: 18px;
                  margin-right: 10px;
              }
          }
          .card-more {
              color: $color_regular-text;
              font-size: 12px;
          }
      }
      .card-list {
          padding: 0 15px;
          .card-item {
              border-bottom: 1px solid #efefef;
              padding-bottom: 10px;
              margin-bottom: 10px;
              &:last-child {
                  padding: 0;
                  margin: 0;
                  border: none;
              }
              .card-content {
                  font-size: 15px;
                  line-height: 22px;
                  margin-bottom: 3px;
                  display: -webkit-box;
                  -webkit-box-orient: vertical;
                  -webkit-line-clamp: 1;
                  overflow: hidden;
                  color: #0c92ff;
              }
              .card-time {
                  padding-right: 5px;
                  font-size: 13px;
                  color: $color_secondary-text;
              }
          }
      }
      .list-empty {
          text-align: center;
          padding: 20px 0;
          font-size: 14px;
          color: $color_secondary-text;
      }
      .card-tip {
          padding: 0 15px;
          font-size: 14px;
          line-height: 22px;
      }
  }
}
</style>
